import React from "react";

// 引入classnames，用于在不同的条件下添加不同的样式
import classNames from "classnames/bind";
// 引入css，并赋值
import styles from "./05-style.css";

// 执行下面的bind方法，得到一个cx的函数
let cx = classNames.bind(styles);

const App = (props) => {
  // const done = false;
  let className = cx({
    // 传入一个对象，key是类名，value是变量或者表达式
    red: true,
    big: props.num === 2,
  });
  return (
    <>
      <h2>不同条件添加不同的样式</h2>
      {/* <p className={props.num === 1 ? "red" : "green"}>hello react!</p> */}
      <p className={className}>hello react!</p>
    </>
  );
};

export default App;
